<template>
	<view class="overflow-hidden pt-4 px-8 ">
		<view class="flex overflow-x-scroll" :class='props.fixed?"flex-x-space-around":""'
			style="scrollbar-height: none;">
			<view v-for="(item,index) in props.list" :key='index'>
				<view class="px-12 pt-8"
					:class="{'active': props.modelValue==item[props.field]}"
					 :style="{paddingBottom: `${Math.abs(parseInt(props.lineBottom)) + 2}px`}"
					 @click="changeCate(item,index)">
					<view class="relative">
						<text class=" text-nowrap transition-all">{{item.label}}</text>
						<!-- 动态line元素 -->
						<view class="line-indicator" :style="{
							width: props.modelValue==item[props.field] ? props.lineWidth : '0',
							height: props.lineHeight,
							backgroundColor: props.lineColor,
							bottom: `${props.lineBottom}px`,
							transform: 'translateX(-50%)',
							transition: 'width 0.3s ease',
							position: 'absolute',
							left: '50%',
							zIndex:1
						}">
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, nextTick } from 'vue'

	const emit = defineEmits(['change', 'update:modelValue'])
	const props = defineProps({
		modelValue: {
			default: '',
			type: [Number, String]
		},
		list: {
			default: [],
			type: Array
		},
		fixed: {
			default: false,
			type: Boolean
		},
		field: {
			default: 'value',
			type: String
		},
		// 新增参数：指示线宽度（激活状态）
		lineWidth: {
			default: '50%',
			type: String
		},
		// 新增参数：指示线高度
		lineHeight: {
			default: '6px',
			type: String
		},
		// 新增参数：指示线颜色
		lineColor: {
			default: '#135DEC',
			type: String
		},
		// 新增参数：指示线距离底部的距离
		lineBottom: {
			default:-8,
			type: Number
		}
	})

	const changeCate = async (e, index) => {
		emit('update:modelValue', e[props.field])
		emit('change', e)
	}
</script>

<style>
	.transition-all {
		transition: all 0.3s ease;
	}

	.active {
		font-weight: bold;
		color: #000;
		font-size: 18px;
	}

	.line-indicator {
		transition: width 0.3s ease;
		border-radius: 5px;
	}
</style>